<template>
  <div class="detail">
    
    <div class="detail-header">
      <img :src="bannerImg" alt="" class="banner" @click="handleClick"> 
      <div class="detail-header-center">
        <div class="info">
          <i class="iconfont tu">&#xe624;</i>
          <span>34</span>
        </div>
        <p>知音号游船</p>
      </div>
    </div>
    <div >
      <detail-nav v-if="isNav" :style="opacitys"></detail-nav>
      <router-link v-else to="/" tag="i" class="iconfont bg" >&#xe6bc;</router-link>
    </div>
    <detail-gallary v-show="isGallay" @toggle="hide" :swiperList="data.gallaryImgs"></detail-gallary>
    <detail-list></detail-list>
  </div>
</template>

<script>
import { DetailModel } from "../../models/DetailModel";
const detailmodel = new DetailModel();
import DetailGallary from "./components/Gallary";
import DetailNav from './components/Nabar';
import DetailList from "./components/DetailList";
export default {
  name: "detail",
  components: {
    DetailGallary,
    DetailNav,
    DetailList
  },

  data() {
    return {
      data:'',
      bannerImg: "",
      isGallay: false,
      isNav: false,
      opacitys:{
        opacity:0,
      }
    };
  },
  mounted() {
    window.addEventListener("scroll",this.handleScroll)
    var id = this.$route.params.id;
    detailmodel.getDetail(id).then(res => {
      console.log(res);
      let data = res.data.data;
      console.log(data);
      this.bannerImg = data.bannerImg;
      this.data = data;
    });
  },
  //destroyed,离开页面摧毁滚动
  destroyed(){
    window.removeEventListener("scroll",this.handleScroll)
  },
  methods: {
    handleScroll(){
      var top = document.documentElement.scrollTop || document.body.scrollTop;
      if(top>0){        
        this.isNav = true;
        var opacity = top/200;
        if(opacity>1){
          opacity=1;
        }
        this.opacitys.opacity = opacity
      }else{
        this.isNav = false
      }
    },
    handleClick() {
      this.isGallay = true;
    },
    hide() {
      this.isGallay = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.banner {
  width: 100%;
}
.bg {
  position: absolute;
  line-height: 80px;
  top: 0px;
  left: 30px;
  font-size: 50px;
}
.detail{
  height: 2000px;    
  color: #fff;
}
.detail-header{
  position: relative;
  font-size: 20px;
  text-align: left;
}
.detail-header-center{
  position: absolute;
  bottom: 50px;
  left: 40px;
}
.info{
  background: #666;
  border-radius:15px;
  width: 70px;
  padding: 5px 10px;
  margin-bottom: 20px;
}
</style>
